
import { sortedIndex } from "lodash";
import React, { useState, useEffect, useCallback, useRef, useMemo } from "react";
import PickItem from "../typings/index";
import "./index.scss";
interface PickColumnProps {
  options: PickItem[];
  onChange: (value: PickItem) => void;
  height?: number;
}
const prefixCls = "qh-base-picker-column";
function PickerColumn({ onChange, options, height = 96 }: PickColumnProps) {
  const [idx, setIdx] = useState<number>(0);
  const [pos, setPos] = useState<number>(0);
  const optionRef = useRef<PickItem[]>();
  const onchangeRef = useRef<(value: PickItem) => void>();

  const realHeight = height;
  optionRef.current = options;
  onchangeRef.current = onChange;

  const moveTo = (i: number) => {
    let j = i;

    setIdx(j);
    // console.log(realHeight * j);
    // console.log('pos...',pos)
    setPos(realHeight * j);
  };

  useEffect(() => {
    if (onchangeRef.current) {
      onchangeRef.current(optionRef.current[idx]);
    }
  }, [idx]);
  const itemsStyle = useMemo(()=>{
      console.log('pos',pos)
      return {
        //top: `calc(50% - ${96})`,
<<<<<<< HEAD
          transform: `translate3d(0,-${pos/2}px,0)`,
=======
          transform:`tanslate3d(0,-${pos}px,0)`,
>>>>>>> 727ab235a77a614e2758bc98f9706c6480f3c2a3
          transition: "transform 250ms ease-in-out",
        }
  },[pos])

  return (
    <div className={prefixCls}>
      <div
        className={`${prefixCls}-items`}
        style={itemsStyle}
      >
        {options.map(({ label, value: v }, i) => (
          <div
            key={v}
            style={{ height,transform:'translate3d()' }}
            className={`${prefixCls}-item`}
            onClick={() => moveTo(i)}
          >
            {label}
          </div>
        ))}
      </div>
    </div>
  );
}

export default PickerColumn;
